<script setup lang="ts">

import FunnyButton from "@/components/FunnyButton.vue";
import {useMessage, NSpace} from "naive-ui";
import {ref} from "vue";
import Card from "@/components/Card.vue";
import BaseLayout from "@/components/BaseLayout.vue";
import ConditionSlot from "@/components/ConditionSlot.vue";
import ScopeSlot from "@/components/ScopeSlot.vue";
import NameScopeSlot from "@/components/NameScopeSlot.vue";

const msg = useMessage();
const count = ref(0);

const slotName = ref("footer");

function alert(step: number) {
  count.value += step;
  msg.success(`功德+${step}`);
}
</script>

<template>
  <card title="插槽">
    <p>功德：{{ count }}</p>
    <n-space>
      <funny-button @showGood="alert">点击</funny-button>

    </n-space>
  </card>
  <card title="默认插槽">
    <p>功德：{{ count }}</p>
    <funny-button @showGood="alert"></funny-button>
  </card>
  <card title="命名插槽">
    <base-layout>
      <template v-slot:header>这是标题</template>
      <template v-slot:body>这时正文</template>
      <template v-slot:footer>这是页脚</template>
    </base-layout>
  </card>
  <card title="条件插槽">
    <condition-slot>
      <template v-slot:header>这是标题</template>
      <template v-slot:body>这时正文</template>
    </condition-slot>
  </card>
  <card title="动态插槽名称">
    <select v-model="slotName">
      <option value="header">header</option>
      <option value="body">body</option>
      <option value="footer">footer</option>
    </select>
    <condition-slot>
      <template v-slot:[slotName]></template>
    </condition-slot>
  </card>
  <card title="作用域插槽">
    <p>props对象是子组件的属性对象</p>
    <scope-slot v-slot="props">{{ JSON.stringify(props) }}</scope-slot>
  </card>
  <card title="具名作用域插槽">
    <name-scope-slot>
      <template v-slot:title="titleProps">{{titleProps}}</template>
      <template v-slot:content="contentProps">{{contentProps}}</template>
    </name-scope-slot>
  </card>
</template>

<style scoped>

</style>